<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-07-03 16:54:29
 * @LastEditTime: 2023-11-14 14:42:15
 * @LastEditors: sueRimn
-->

<template>
  <view class="left-box" :style="{ height: height + 'px' }">
    <scroll-view scroll-y class="scroll-container" :style="{ height: height + 'px' }">
      <view v-for="(item, index) in list" :key="item.categoryId"
        class="item d-flex justify-content-center align-content-center" :class="[
          (categoryIndex + 1 === index) ? 'border-bottom-radius' : '',
          (categoryIndex - 1 === index) ? 'border-top-radius' : '',
          categoryId === item.categoryId ? 'active' : ''
        ]" @click="$emit('onClick', index)">
        <view class="text">
          {{ item.categoryName }}
        </view>
      </view>
      <view class="empty" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    height: { type: Number, default: 0 },
    list: { type: Array },
    categoryId: { type: Number, default: 0 },
    categoryIndex: { type: Number, default: 0 },
    navScrollIntoView: { type: String },
  }
}
</script>

<style lang="scss" scoped>
.left-box {
  width: 200rpx;
  margin: 30rpx 0 0 0;
  overflow: hidden;

  .scroll-container {
    width: 100%;
  }

  .uni-scroll-view-content {
    display: flex;
  }

  .item {
    width: 200rpx;
    height: 104rpx;
    background: #fff;
    position: relative;


    .text {
      font-size: var(--hui-font-size-28);
      line-height: 104rpx;
      color: var(--hui-color-title);
      font-weight: 400;
    }

    &.active {
      background: #F6F7F9;

      &::after {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        display: inline-block;
        width: 8rpx;
        height: 40rpx;
        background-color: var(--hui-color-primary);
      }

      .text {
        font-weight: 700;
      }
    }
  }

  .empty {
    background: #ffffff;
    flex-grow: 1;
  }

  .border-top-radius {
    border-radius: 0 0 20rpx 0;
  }

  .border-bottom-radius {
    border-radius: 0 20rpx 0 0;
  }
}
</style>